import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import React, { useEffect } from 'react'
import handWithNum from '@/resource/myChartResult/handWithNum.png'
import Store from './store'
import { useLocation } from 'umi'
export default observer((props: any) => {
    const store = useLocalObservable(() => new Store())
    const { id } = useLocation().query
    useEffect(() => {
        if (id) {
            store.getBarriersData(id)
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    return (
        <div className={styles.page}>
            <div className={styles.top_view}>我的五指图</div>
            <div>
                <img src={handWithNum} />
            </div>
            <div className={styles.content}>
                {store.barriersList.map((item, index) => {
                    return (
                        <div className={styles.career} key={item.id}>
                            <div className={styles.hollow}>{index + 1}</div>
                            <div className={styles.solid} />
                            <div className={styles.title}>
                                <div>{`${item.name}：`}</div>
                                <div className={styles.feature}>{item.feature}</div>
                            </div>
                        </div>
                    )
                })}
            </div>
            <div />
        </div>
    )
})
